<template>
	<view id="order_details">
		<view class="top_index">
			<view :class="item.id === indexs? 'title':''" @click="onclor(item.id,item.ids)"
				v-for="(item,index) in listdata">
				{{item.name}}
			</view>
		</view>

		<view class="main_order">
			<u-empty mode="order" :show="onshou" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
			<view @click="toxiangQ(items)" class="list_order" v-for="items in datalist">
				<view class="list_order_top">
					<view style="font-size: 13px;">
						订单编号：{{items.order_no}}
					</view>
					<view style="font-size: 13px;">
						{{items.zhuantai}}
					</view>
				</view>
				<view class="list_order_body">
					<view style="font-size: 15px;margin-bottom: 15px;">
						<text class="iconfont" style="font-weight: 400; margin-right: 5px;">&#xe7a8;</text>康达农业商城
					</view>
					<view class="list_order_body_list">
						<view class="">
							<image style="border-radius: 5px; width: 100px;height: 100px; margin-right: 10px;"
								:src="items.items[0].goods_cover" mode=""></image>
						</view>
						<view style="display: flex;justify-content: space-between;flex-direction: column; width: 80%;">
							<view style="font-size: 15px; font-weight: 600;">
								{{items.items[0].goods_name}}
							</view>
							<view style="display: flex;justify-content: space-between;margin-bottom: 15px;">
								<text style="font-size: 18px; color: red;"><text
										style="font-size: 12px;">￥</text>{{items.items[0].price_selling}}</text> <text
									style="font-size: 12px;">x{{items.items[0].stock_sales}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="list_order_foot">
					<view class="listsum">
						共{{items.items[0].stock_sales}}件商品
					</view>
					<view class="boots">
						<button :show="items.items[0].ondel">删除订单</button>
						<button>再次购买</button>
					</view>
				</view>

			</view>
			<view v-if="gendshow" style="text-align: 12px; color: currentColor; text-align: center;">
				<text>没有更多了...</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gendshow: false,
				indexs: '0',
				zhuantai: '',

				// 已取消,1预订单,2待支付,3支付中,4已支付,5已发货,6已完成)
				listdata: [{
						id: '0',
						ids: '2,4,5,6',
						name: '全部'
					},
					{
						id: '1',
						ids: '2',
						name: '待付款'
					},
					{
						id: '2',
						ids: '4',
						name: '待发货'
					},
					{
						id: '3',
						ids: '5',
						name: '待收货'
					},
					{
						id: '4',
						ids: '6',
						name: '已完成'
					},

				],
				datalist: [],
				liston: {
					status: '2,4,5,6',
					page: 1
				},
				onshou: true
			}
		},

		onReachBottom() {
			this.liston.page = this.liston.page + 1
			
			this.onlist()
		},

		onLoad(option) {
			let sum = option.id
			this.indexs = sum
			if (sum == 4) {
				this.liston.status = 6
				this.liston.page = 1
			}
			if (sum == 3) {
				this.liston.status = 5
				this.liston.page = 1
			}
			if (sum == 2) {
				this.liston.status = 4
				this.liston.page = 1
			}
			if (sum == 1) {
				this.liston.status = 2
				this.liston.page = 1
			}
			if (sum == 0) {
				this.liston.status = 0
				this.liston.page = 1
			}
			this.onlist()
		},
		methods: {
			onclor(s, ids) {
				this.indexs = s
				this.liston.status = ids
				this.liston.page = 1
				this.datalist = []
				this.onlist()
			},

			toxiangQ(items) {
				// uni.setStorage({
				// 	key: 'dindanxiangqing',
				// 	data: items,
				// 	success: function() {
				// 		console.log('success');
				// 	}
				// });


				uni.navigateTo({
					url: '../dindanxiangqing/dindanxiangqing?item=' + items.id,
					fail: (res) => {
						console.log(res) //打印错误信息
					}
				});
			},

			onlist() {

				this.$http.getgetorder(this.liston).then(res => {
					console.log(res.data.list);
					for (var i = 0; i < res.data.list.length; i++) {
						this.datalist.push(res.data.list[i])
					}
					if(this.liston.page == 1){
						if(res.data == []){
							this.gendshow = true
						}
					}
		
					for(var i=0;i<this.datalist.length;i++){
						if(this.datalist[i].status == 2){
							this.datalist[i].ondel = false
							this.datalist[i].zhuantai = '未支付'
						}
						if(this.datalist[i].status == 6){
							this.datalist[i].ondel = true
							this.datalist[i].zhuantai = '已完成'
						}
						if(this.datalist[i].status == 5){
							this.datalist[i].ondel = false
							this.datalist[i].zhuantai = '已发货待收货'
						}
						if(this.datalist[i].status == 4){
							this.datalist[i].ondel = false
							this.datalist[i].zhuantai = '已支付待发货'
						}
						if(this.datalist[i].status == 0){
							this.datalist[i].ondel = true
							this.datalist[i].zhuantai = '交易关闭'
						}

					}


					if (this.datalist.length == 0) {
						this.onshou = true
					} else {
						this.onshou = false
					}
				})
			}
		},

	}
</script>


<style>
	@font-face {
		font-family: 'iconfont';
		/* project id 3367375 */
		src: url('');
		src: url('?#iefix') format('embedded-opentype'),
			url('//at.alicdn.com/t/font_3367375_dqmkxaxa6zi.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_3367375_dqmkxaxa6zi.woff') format('woff'),
			url('//at.alicdn.com/t/font_3367375_dqmkxaxa6zi.ttf') format('truetype'),
			url('#iconfont') format('svg');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
<style>
	#order_details {
		width: 100%;

		background-color: #F7F7F7;
	}

	.top_index {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #efefef;
		line-height: 55px;
		background-color: #FFFFFF;
	}

	.top_index>view {
		font-size: 13px;

	}

	.title {
		border-bottom: 1px solid #ab0000;
		color: #ab0000;
	}

	.main_order {
		padding: 10px;
		background-color: #F7F7F7;
	}

	.list_order {
		padding: 15px;
		background-color: #FFFFFF;
		margin-bottom: 12px;
		border-radius: 10px;
	}

	.list_order_top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.list_order_body {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.list_order_body_list {
		display: flex;
		width: 100%;
	}

	.listsum {
		text-align: right;
		font-size: 12px;
		margin-bottom: 10px;
	}

	.boots {
		display: flex;
		justify-content: flex-end;
	}

	.boots>button {
		background-color: #FFFFFF;
		font-size: 12px;
		margin: 0;
		margin-left: 15px;
	}

	.list_order_foot {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
</style>
